<template>
  <a-modal
    :title="`上架(包裹ID：${packInfo.bar})`"
    :maskClosable="false"
    :visible="visible"
    :confirm-loading="loading"
    @ok="submit()"
    @cancel="close()"
  >
    <div>
      <div>
        <a-form-model ref="formRef" :model="form" :rules="rules">
          <a-form-model-item prop="positionId">
            <a-input v-model="form.positionId" ref="inputRef" placeholder="请输入或扫描条形码" @pressEnter="submit" />
          </a-form-model-item>
        </a-form-model>
      </div>
    </div>
  </a-modal>
</template>

<script>
import { packGrounding } from '@/api/pack.js'
export default {
  data() {
    return {
      visible: false,
      loading: false,
      scanValue: undefined,
      packInfo: {},
      form: {
        positionId: undefined,
      },
      rules: {
        positionId: [{ required: true, message: '请输入' }],
      },
    }
  },
  methods: {
    async submit() {
      try {
        await this.$refs.formRef.validate()
        const { packInfo, form } = this
        const params = {
          boxBar: packInfo.bar,
          boxId: packInfo.id,
          orderId: packInfo.orderId,
          orderNo: packInfo.orderNo,
          positionId: form.positionId,
        }
        this.loading = true
        await packGrounding(params)
        this.$message.success('操作成功!')
        this.$emit('complete')
        this.close()
      } catch (_) {}
      this.loading = false
    },
    open(e) {
      this.visible = true
      this.$set(this.form, 'positionId', undefined)
      this.packInfo = e
      this.$nextTick(() => {
        this.$refs.inputRef.$refs.input.focus()
      })
    },
    close() {
      this.visible = false
    },
  },
}
</script>

<style lang="scss" scoped>
</style>